import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { toast } from '~/composables/util'
import { showModal } from '~/composables/util'
import { logout,updatePassword } from '~/api/manager'

// 封装用户修改密码的方法
export function useRepassWord(){
    const router = useRouter()
    const store = useStore()

    // 修改密码弹出抽屉
    const formDrawerRef = ref(null)
    
    // 表单响应变量
    const form = reactive({
        oldpassword: '',
        password: '',
        repassword: ''
    })

    // 校验规则
    const rules = {
        oldpassword: [
            {
                required: true,
                message: '旧密码不可以为空',
                trigger: 'blur'
            },
            {
                min: 3,
                max: 11,
                message: '旧密码长度不能小于5个字符',
                trigger: 'blur'
            }
        ],
        password: [
            {
                required: true,
                message: '新密码不可以为空',
                trigger: 'blur'
            },
            {
                min: 5,
                message: '新密码长度不能小于5个字符',
                trigger: 'blur'
            }
        ],
        repassword: [
            {
                required: true,
                message: '确认密码不可以为空',
                trigger: 'blur'
            },
            {
                min: 5,
                message: '确认密码长度不能小于5个字符',
                trigger: 'blur'
            }
        ]
    }
    
    // 表单引用变量
    const formRef = ref(null)

    // 确认修改密码事件
    const onSubmit = () => {
        formRef.value.validate((valid) => {
            if(!valid){
                return false
            }
            formDrawerRef.value.openLoading()
            updatePassword(form).then(res => {
                // 提示修改密码成功
                toast('修改密码成功')
                // 清除store
                store.dispatch('logout')
                // 跳转回登录页面
                router.push('/login')
            }).finally(() => {
                formDrawerRef.value.closeLoading()
            })
        })
    }
    // 弹出修改框方法
    const openRepassWordForm = () => {
        formDrawerRef.value.open()
    }
    // 把方法返回出去
    return {
        formDrawerRef,
        form,
        rules,
        formRef,
        openRepassWordForm,
        onSubmit
    }
}

// 封装退出登录函数
export function useLogout(){
    const router = useRouter()
    const store = useStore()

    // 退出登录
    const handleLogout = () => {
        showModal(
            '您确定要退出登录吗?'
        ).then(() => {
            logout().then(async () =>{
            // 清除cookies和用户信息
                await store.dispatch('logout')
            })
            .finally(() => {
                // 将是否请求过getInfo置为false,为了下次登录请求
                store.commit('SET_HASGETINFO')
                // 跳转到登录页面
                router.push('/login')
                // 提示退出成功
                toast('退出登录成功')
            })
        }).catch(() => {
            console.log('取消退出登录')
        })
        
    }
    return {
        handleLogout
    }
}
